<template>
<ContentWrap>
<div v-loading="formLoading" :style="`height:${contentHeight}px`">
  <div class="routeHeader mb-5px" v-loading="formLoading">
        <el-button class="mr-5px" type="primary" @click="saveForm" v-loading="formLoading"
        >保 存</el-button
      >
      <el-button @click="goBack" v-loading="formLoading">关闭</el-button>
  </div>
  <div class="contentView" v-loading="formLoading">
    <el-table
    ref="multipleTableRef" 
    :data="list"
    border 
    style="width:100%"
    class="tableView"
    v-loading="formLoading"
    :height="contentHeight - 70"
    >
      <el-table-column label="序号" align="center" type="index" :min-width="80"/>
      <el-table-column label="工单号/任务单号" align="left" header-align="left" prop="workTaskNumber" :min-width="150" />
      <el-table-column label="产品编号" align="left" header-align="left" prop="productNumber" :min-width="150"/>
      <el-table-column label="产品名称" align="left" header-align="left" prop="productName" :min-width="120"/>
      <el-table-column label="产品规格" align="left" header-align="left" prop="productStandard" :min-width="120"/>
      <el-table-column label="订单数量" align="left" header-align="left" prop="orderQuantity" :min-width="120"/>
      <el-table-column label="编号" align="left" header-align="left" prop="serialNumber" :min-width="120"/>
      <el-table-column label="部件编号" align="left" header-align="left" prop="partNumber" :min-width="120"/>
      <el-table-column label="部件名称" align="left" header-align="left" prop="partName" :min-width="120"/>
      <el-table-column label="图纸图号" align="left" header-align="left" prop="partDrawingNumber" :min-width="150">
        <template #default="scope">
            <el-button  class="drawingBtn" type="primary" link @click="jumpPdfFile(scope.row.partDrawingNumber)">{{
              scope.row.partDrawingNumber
            }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="部件规格" align="left" header-align="left" prop="partSpecification" :min-width="120"/>
      <el-table-column label="材质" align="left" header-align="left" prop="material" :min-width="120"/>
      <el-table-column label="规格" align="left" header-align="left" prop="productStandard" :min-width="120"/>
      <el-table-column label="净尺寸（长）" align="left" header-align="left" prop="netSizeLength" :min-width="120"/>
      <el-table-column label="净尺寸（宽）" align="left" header-align="left" prop="netSizeWidth" :min-width="120"/>
      <el-table-column label="下料尺寸（长）" align="left" header-align="left" prop="cuttingSizeLength" :min-width="130"/>
      <el-table-column label="下料尺寸（宽）" align="left" header-align="left" prop="cuttingSizeWidth" :min-width="130"/>
      <el-table-column label="计划数量" align="left" header-align="left" prop="planQuantity" :min-width="100"/>
      <el-table-column label="工序名称" align="left" header-align="left" prop="dictProcessName" :min-width="120">
      <template #default="scope">
        <byte-tag
          className="test"
          :type="'craft_process_name'"
          :value="scope.row.dictProcessName"
        />
      </template>
      </el-table-column>
      <el-table-column label="工种" align="left" header-align="left" prop="dictTypeOfWork" :min-width="80">
        <template #default="scope">
        <byte-tag
          className="test"
          :type="'config_manufacturing_details_cutting_process'"
          :value="scope.row.dictTypeOfWork"
        />
      </template>
      </el-table-column>
      <el-table-column label="下料类型" align="left" header-align="left" prop="dictBaitingType" :min-width="120">
      <template #default="scope">
        <byte-tag
          className="test"
          :type="'config_wage_baiting_type'"
          :value="scope.row.dictBaitingType"
        />
      </template>
      </el-table-column>
      <el-table-column label="是否机加" align="left" header-align="left" prop="dictIsMachine" :min-width="80">
        <template #default="scope">
        <byte-tag
          className="test"
          :type="'is_machining'"
          :value="scope.row.dictIsMachine"
        />
      </template>
      </el-table-column>
      <el-table-column label="机加工序" align="left" header-align="left" prop="machiningProcess" :min-width="80">
        <template #default="scope">
        <byte-tag
          className="test"
          :type="'machining_process'"
          :value="scope.row.machiningProcess"
        />
      </template>
      </el-table-column>
      <el-table-column label="生产班组" align="left" header-align="left" prop="productionTeam" :min-width="150">
          <template #default="scope"> 
               <el-select
                v-model="scope.row.productionTeam"
                placeholder="请选择"
                filterable
                clearable
                class="!w-120px"
               >
          <el-option
            v-for="dict in OrgTeamArchivesList"
            :key="dict.id"
            :label="dict.teamName"
            :value="dict.teamName"
          />
           </el-select>
          </template>
      </el-table-column>
      <el-table-column label="设备名称" align="left" header-align="left" prop="deviceName" :min-width="150">
        <template #default="scope">
         <el-select
           v-model="scope.row.deviceName"
           placeholder="请选择"
           filterable
           clearable
           class="!w-120px"
           :disabled="true"
           @change="(val)=>{selectDeviceName(val,scope.$index)}"
           >
          <el-option
            v-for="dict in deviceList"
            :key="dict.id"
            :label="dict.deviceName"
            :value="dict.deviceName"
          />
        </el-select>
       </template>
        </el-table-column>
      <el-table-column label="设备编码" align="left" header-align="left" prop="deviceCode" :min-width="150">
        <template #default="scope">
        <el-select
           v-model="scope.row.deviceCode"
           placeholder="请选择"
           filterable
           clearable
           class="!w-120px"
           :disabled="true"
           >
          <el-option
            v-for="dict in deviceList"
            :key="dict.id"
            :label="dict.deviceCode"
            :value="dict.deviceCode"
          />
        </el-select>
       </template>
        </el-table-column>
      <el-table-column label="作业者" align="left" header-align="left" prop="operator" :min-width="150" class="m-4">
          <template #default="scope" >
            <el-input
            class="fontHide"
            readonly
            v-model="scope.row.operator"
            :disabled="true"
            @click="openOperator(scope.row.jobNumber,scope.$index)"
            />
          </template>
        </el-table-column>
      <el-table-column label="计划开始日期" align="left" header-align="left" prop="planStartDate" :min-width="220">
        <template #default="scope">
          <el-date-picker
              style="width:180px"
              v-model="scope.row.planStartDate"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="选择计划开始日期"
            />
        </template>
      </el-table-column>
      <el-table-column label="计划结束日期" align="left" header-align="left" prop="planEndDate" :min-width="220">
        <template #default="scope">
        <el-date-picker
              style="width:180px"
              v-model=scope.row.planEndDate
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="选择计划结束时间"
            />
        </template>
        </el-table-column>
      <el-table-column label="位置" align="left" header-align="left" prop="warehousePosition" :min-width="150">
      <template #default="scope">
          <el-select
           v-model="scope.row.warehousePosition"
           placeholder="请选择"
           filterable
           clearable
           class="!w-120px"
           >
          <el-option
            v-for="dict in warehousePositionList"
            :key="dict.id"
            :label="dict.warehousePosition"
            :value="dict.warehousePosition"
          />  
        </el-select>
          </template>
          </el-table-column>
      <el-table-column label="状态" align="left" header-align="left" prop="dictProductiveTaskStatus" :min-width="80">
        <template #default="scope">
        <byte-tag
          className="test"
          :type="'productive_task_status'"
          :value="scope.row.dictProductiveTaskStatus"
        />
      </template>
      </el-table-column>
    </el-table>
  </div>
</div>
</ContentWrap>
  <!-- 作业者 -->
  <operator ref="operatorRef" @setOperator="setOperator" />
</template>
<script setup>
import { jumpPdfFile } from '@/utils/formCreate'
import * as ProductionTaskOrderApi from '@/api/produce/workOrderManagement/productionTaskOrder'
import * as ProductionDispatchingAudit from '@/api/produce/workOrderManagement/productionDispatchingAudit'
import { useTagsViewStore } from '@/store/modules/tagsView'
import ByteTag from './ByteTag.vue'
import operator from './operator.vue'
const message = useMessage() // 消息弹窗
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const { t } = useI18n() // 国际化
const { query } = useRoute() // 路由的查询
const list =ref([]) //渲染数据

// 获取生产班组
const OrgTeamArchivesList =ref([])
const getOrgTeamArchives = async()=>{
  OrgTeamArchivesList.value = await ProductionTaskOrderApi.getOrgTeamArchives()
}

// 获取设备名称和设备编码
const deviceList = ref([])
  const getDeviceMessageList = async()=>{
    deviceList.value = await ProductionTaskOrderApi.getDeviceMessageList()
    console.log()
}

//获取设备编码
const deviceCodeList =ref([])
const selectDeviceName = async(val,index)=>{
  if(!val){
   deviceCodeList.value[index] =[]
   list.value[index].deviceCode=''
  }else{
   deviceCodeList.value[index] =[]
   list.value[index].deviceCode=''
   deviceCodeList.value[index] = await ProductionTaskOrderApi.getDeviceMessageList({deviceName:val})
  }
}

// 获取作业者
const operatorRef = ref()
const openOperator = (jobNumberStr,index)=>{
  let jobNumberList = jobNumberStr.split(',')
  operatorRef.value.open(jobNumberList,index)
}

// 设置作业者
const setOperator = (index) => {
const operator = operatorRef.value.multipleSelection
const operatorNumber = []
const operatorName=[]
operator.forEach(item=>{
  operatorNumber.push(item.jobNumber)
  operatorName.push(item['staffName'])
})
list.value[index].jobNumber = operatorNumber.join(',')

list.value[index].operator = operatorName.join(',')
}


// 获取位置
const warehousePositionList =ref([])
const warehousePosition = async()=>{
  warehousePositionList.value = await ProductionTaskOrderApi.getWarehousePosition()
}

/**关闭*/
const tagsViewStore = useTagsViewStore()
const route = useRouter() // 路由
const goBack = async() => {
  //获取当前路由并删除tagView
  tagsViewStore.delView(route.currentRoute.value)
  //跳转列表页
  route.push({
    path:'/produce/produce/workOrderManagement/productionDispatchingAudit'
  })
}

/** 保存 */
const saveForm = async () => {
  console.log(list.value,'liet')
  // 提交请求
  formLoading.value = true
  try {
    const temp=[]// 存放数据
    list.value.forEach((item)=>{
      temp.push({
      id:item.id,
      productionTeam:item.productionTeam,
      planStartDate:item.planStartDate,
      planEndDate:item.planEndDate,
      warehousePosition:item.warehousePosition
      })

    })
    await ProductionDispatchingAudit.updateProductionDispatchingAudit(temp)
    message.success(t('保存成功'))
    goBack()
  } finally {
    formLoading.value = false
  }
}

/** 初始化 */
const contentHeight = ref(0)
onMounted(async () => {
    contentHeight.value = document.body.clientHeight - 150
    formLoading.value = true
    list.value= await ProductionDispatchingAudit.getProductionDispatchingAuditList(JSON.parse(query.id))
    formLoading.value= false
    getOrgTeamArchives()
    getDeviceMessageList()
    warehousePosition()
  // 获取设备编码、作业者下拉信息
  list.value.forEach( async (item,i)=>{
    //设备编码
     deviceCodeList.value[i] = await ProductionTaskOrderApi.getDeviceMessageList({deviceName:item.deviceName})
  })
})


</script>
<style lang='scss' scoped >
.tableView {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    cursor: default;
    .el-input__inner {
      cursor: default !important;
      text-align: center;
    }
  }
}
.drawingBtn {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
</style>